<template>
	<div class="collect">
		<van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" />
		<div class="collect-list" v-if="collectList">
			<div class="collect-item" v-for="(item,index) in collectList" :key="index">
				<div class="item-user">
					<img :src="item.itemInfo.imgs[0]">
					<div class="user-info">
						<span class="user-name">他好像一条狗</span><br>
						<span class="graduate-school">深圳大学</span>
					</div>
				</div>
				<div class="item-good">
					<img :src="item.itemInfo.imgs[0]">
					<div class="good-info">
						{{item.itemInfo.description}}
					</div>
				</div>
				<div class="item-footer">
					<div class="footer-wrapper">
						<span class="from-area">来自广州</span>
						<span class="cancel">取消{{componentName}}</span>
					</div>				
				</div>		
			</div>
		</div>
	</div>
</template>
<script>
	import likeApi from "@/api/like" 
	export default{
		data(){
			return {
				collectList:null,
				typeId:0
			}
		},
		computed:{
			title(){
				if(this.typeId === "2"){
					return "我的喜欢"
				}else{
					return "我的收藏"
				}
			},
			componentName(){
				if(this.typeId === "2"){
					return "喜欢"
				}else{
					return "收藏"
				}
			}
		},
		methods:{
			clearData(){
				this.collectList = null,
				this.typeId = 0
			},
			getLClist(typeId){
				likeApi.getLCInfoAll(typeId).then(res=>{
					this.collectList = res.list;
				})
			}
			
		},
		activated(){
			this.typeId = this.$route.query.typeId;
			this.getLClist(this.typeId);
		},
		deactivated(){
			this.clearData();
		}
	}
</script>
<style lang="less" scoped>
	.collect-list{
		padding:10px;
	}
	.collect-item{
		overflow: hidden;
		padding:10px;
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 5px;
		.item-user{
			display: flex;
			padding-bottom:10px;
			text-align:left;
			img{
				width:40px;
				height:40px;
				border-radius: 4px;
				margin-right:10px;
			}
			.user-name{
				font-weight:700;
				font-size: 12px;
			}
		}
		.item-good{
			padding:20px 0;
			display:flex;
			border-top:1px solid #ddd;
			border-bottom:1px solid #ddd;
			img{
				width:70px;
				height:70px;
				border-radius: 5px;
				margin-right:10px;
			}
		}		
		.item-good{
			padding:10px 0;
			display:flex;
			border-top:1px solid #ddd;
			border-bottom:1px solid #ddd;
			img{
				width:70px;
				height:70px;
				border-radius: 10px;
				margin-right:10px;
			}
			.good-info{
				text-align: left;
			}
		}
		.item-footer{
			padding:10px 0;
			.footer-wrapper{
				display: flex;
				justify-content: space-between;
				align-items:center;
				.cancel{
					border:1px solid #333;
					padding:3px;
				}
			}
		}
	}
</style>